コードブロック記法に行番号を表示するUserCSS (Mijinko)
デザイン内容
行頭を縦線で区切っている
これがとてもいいtakker.icon
https://gyazo.com/88f4f4e2d4b009c1868820879a4754dd
カーソルのいる行番号がハイライトされる
番号は右寄せ
バグ
/icons/done.iconsmartphoneで行番号が表示されない？
ほかのUserCSSと干渉しているのかも
2022-03-30 13:39:30 @media screenで制限がかかっているだけみたい
よく読んでいなかった
Thanks, /Mijinko/Mijinko_SD.icon！
code:style.css
body *::before {
--code-number-color: var(--code-color, #342d9c); /* --accent-color: ; */
}
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
/* ↑無効化した */
.section-title {
counter-reset: codeline;
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.4em;
width: 2em;
padding-right: 0.2em;
text-align: right;
vertical-align: bottom;
border-right: solid 1px #fff; /* ↓行番号の色の指定はここ */
color: var(--code-number-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
/* ↓カーソル行の背景色の色はここ */
background-color: var(--accent-color);
}